<template>
  <div id="statistics-container">
    <el-container>
      <el-header>
        <el-card class="box-card" style="background-color: #e5eaf3" shadow="always">
          <el-statistic
            title="图片总数量"
            :key="totalImageAmount"
            :value="totalImageAmount"
            style="text-align: center"
          />
        </el-card>
      </el-header>
      <el-main>
        <div class="chart-container" :loading="isLoadingParent">
          <div id="chart1-box" style="height: 100%; width: 47%"></div>
          <div v-if="showSubData" id="chart2-box" style="height: 100%; width: 47%"></div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import * as echarts from "echarts"
import {
  getImageAmount,
  getParentCategoryStatisticsApi,
  getSubCategoryStatisticsApi
} from "@/api/data-manager/statisticsApi"
import { ElMessage } from "element-plus"

const showSubData = ref<boolean>(false)
const totalImageAmount = ref<number>()

const parentStatistics = ref<any[]>()
const parentChartOption = ref()
const isLoadingParent = ref<boolean>(true)

const currentChildStatitics = ref<any[]>()
const currentChildChartOption = ref()
const currentChart = ref<echarts.ECharts | null>()

onMounted(() => {
  setTimeout(async () => {
    let res
    try {
      res = await getImageAmount()
    } catch (error) {
      ElMessage.error("获取图片数量失败")
      return
    }
    totalImageAmount.value = res.data
  })
  initParentCategoryChart()
})

function initParentCategoryChart() {
  let chart = echarts.init(document.getElementById("chart1-box"))
  setTimeout(async () => {
    let res
    try {
      res = await getParentCategoryStatisticsApi()
    } catch (error) {
      ElMessage.error("获取大类别统计信息失败")
      return
    }
    parentStatistics.value = res.data
    parentChartOption.value = {
      title: {
        text: "大类别图片数据统计",
        subtext: "可点击查看数据集数据",
        left: "center"
      },
      tooltip: {
        trigger: "item"
      },
      legend: {
        orient: "vertical",
        left: "left"
      },
      series: [
        {
          name: "图片数量",
          type: "pie",
          radius: "50%",
          data: parentStatistics.value?.map((data) => ({
            value: data.amount,
            name: data.name,
            id: data.id
          })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    }
    chart.setOption(parentChartOption.value)
    chart.on("click", (param: any) => {
      initDataSetChart(param.data.id, param.data.name)
    })
    isLoadingParent.value = false
  })
}

function initDataSetChart(id: number, name: string) {
  showSubData.value = true
  setTimeout(async () => {
    if (currentChart.value) {
      currentChart.value.dispose()
      currentChart.value = null
    }
    const chart = echarts.init(document.getElementById("chart2-box"))
    let res
    try {
      res = await getSubCategoryStatisticsApi(id)
    } catch (error) {
      ElMessage.error("获取数据集数据失败")
      return
    }
    currentChildStatitics.value = res.data
    currentChildChartOption.value = {
      title: {
        text: name + " 数据集图片统计"
      },
      grid: {
        bottom: "15%",
        containLabel: true
      },
      legend: {
        x: "center",
        y: "bottom"
      },
      tooltip: {},
      dataset: {
        source: [
          ["amount", ...(<any[]>currentChildStatitics.value?.map((data) => data.name))],
          ["图片数量", ...(<any[]>currentChildStatitics.value?.map((data) => data.amount))]
        ]
      },
      xAxis: { type: "category" },
      yAxis: {},
      series: <any[]>currentChildStatitics.value?.map((data) => ({ type: "bar" }))
    }
    chart.setOption(currentChildChartOption.value)
    currentChart.value = chart
  })
}
</script>

<style lang="scss" scoped>
#statistics-container {
  height: 100%;
  width: 100%;
  .chart-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  :deep(.el-header) {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  :deep(.el-main) {
    height: 720px;
  }
  :deep(.el-statistic__head) {
    font-size: 20px;
  }
}
</style>
